<template>
  <div @click="indexNum = -1">
    <div class="major" style="margin-top: 30px">
      <div class="major-left">专业选择</div>
      <div class="major-right">
        <el-popover
          v-for="(item, index) in jobList"
          :key="index"
          :visible="indexNum == index"
          placement="bottom"
          width="auto"
          trigger="click"
        >
          <template #reference>
            <div
              class="major-size alitem"
              :class="indexNum === index ? 'active' : ''"
              @click.stop="clickChange(index)"
            >
              <div>{{ item.name }}({{ item.children.length }})&nbsp;</div>
              <el-icon>
                <ArrowDown />
              </el-icon>
            </div>
          </template>
          <el-checkbox-group
            v-model="tempSelJobs"
            style="display: flex; flex-wrap: wrap; width: 500px"
          >
            <el-checkbox
              v-for="job in item.children"
              :key="job"
              :value="job"
              @change="handleCheckedCitiesChange"
              >{{ job.name }}</el-checkbox
            >
          </el-checkbox-group>
          <div class="right matop">
            <el-button @click="indexNum = -1">取消</el-button>
            <el-button type="primary" @click="onClickCheckboxConfirm"
              >确定</el-button
            >
          </div>
        </el-popover>
      </div>
    </div>
    <el-row class="matop">
      <el-col :span="12">
        <div class="alitem">
          <div class="major-left">意向职业</div>
          <el-input
            ref="buttonRef"
            v-model="searchKey"
            style="width: 240px"
            placeholder="输入意向职业"
            clearable
            @input="searchKeyInput"
            @focus="isShowSearchPop = true"
            @blur="isShowSearchPop = false"
          >
            <template #prefix>
              <el-icon class="el-input__icon">
                <search />
              </el-icon>
            </template>
          </el-input>
          <div
            v-show="isShowSearchPop && searchList.length > 0"
            class="search-popover"
          >
            <div
              class="curr"
              v-for="(item, index) in searchList"
              @mousedown.native="onClickSearchItem(item, index)"
            >
              <div style="padding: 5px 0">
                {{ index == 0 ? '在筛选条件中搜索 "' + item + '"' : item.name }}
              </div>
              <div
                v-if="index + 1 < searchList.length"
                style="width: 100%; height: 1px; background-color: #eee"
              ></div>
            </div>
          </div>
        </div>
      </el-col>
      <el-col :span="12" v-if="idDrawer">
        <div class="flexend right">
          <div>快速通道</div>
          <div class="alitem" @click="fastTrack(1, '3-1')">
            <el-icon size="20">
              <Memo />
            </el-icon>
            院校库
          </div>
          <!-- <div class="alitem" @click="fastTrack(2)">
					<el-icon size="20">
						<TrophyBase />
					</el-icon>
					大学排名
					</div> -->
          <div class="alitem" @click="fastTrack(3)">
            <el-icon size="20">
              <Histogram />
            </el-icon>
            分数线
          </div>
          <div class="alitem" @click="fastTrack(4)">
            <el-icon size="20">
              <List />
            </el-icon>
            一分一段
          </div>
          <div class="alitem" @click="fastTrack(5)">
            <el-icon size="20">
              <List />
            </el-icon>
            同分去向
          </div>
        </div>
      </el-col>
    </el-row>

    <Drawertool ref="drawertoolRef" />
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { allCareer, searchCareer } from '@/api/appv2/appv1.js';
import userSearch from '@/store/modules/searchInfo.js';
import { ElMessage } from 'element-plus';
import _ from 'lodash';
// 抽屉
import Drawertool from '@/components/Drawertool/';
const drawertoolRef = ref(null);

const userSearchVal = userSearch();

const props = defineProps({
  // 学生ID
  studentId: {
    type: Number,
    default: 0,
  },
  idDrawer: {
    type: Boolean,
  },
  zntbProvinceId: {
    type: Number,
    default: 0,
  },
  zntbScore: {
    type: Number,
    default: 0,
  },
});

const indexNum = ref(-1);

const searchList = ref([]); // 模糊搜索数据源
const jobList = ref([]); // 职业筛选数据源
const selJobs = ref([]); // 选中的职业筛选数据
const tempSelJobs = ref([]); // 临时模糊搜索数据

const searchKey = ref(''); // 搜索关键词
const isShowSearchPop = ref(false); // 是否显示搜索pop

// 模糊搜索
const searchItem = reactive({
  code: 0,
  name: '',
  type: 'zsearch',
});

function getallJob() {
  allCareer({
    studentId: props.studentId,
  }).then((res) => {
    jobList.value = res.data;
  });
}
getallJob();

// 搜索输入值改变
const searchKeyInput = _.throttle((val) => {
  if (val.length >= 2) {
    searchCareer({
      search: val,
      pageSize: 1000,
      studentId: props.studentId,
    }).then((res) => {
      searchList.value = res.data;

      searchList.value.splice(0, 0, searchKey.value);
      isShowSearchPop.value = true;
    });
  } else {
    searchList.value = [];
    isShowSearchPop.value = false;
  }
}, 800);

// 点击单个筛选专业
const handleCheckedCitiesChange = () => {
  if (tempSelJobs.value.length > 5) {
    tempSelJobs.value.splice(5, 1);

    ElMessage({
      message: '意向职业不得超过5个！',
      type: 'warning',
    });
  }
};

/**
 * 点击专业组
 * @param {Number} val 专业组下标
 */
function clickChange(val) {
  if (indexNum.value == val) {
    indexNum.value = -1;
  } else {
    indexNum.value = val;
  }

  tempSelJobs.value = JSON.parse(JSON.stringify(selJobs.value));
}

// 确定筛选条件
function onClickCheckboxConfirm() {
  selJobs.value = tempSelJobs.value;
  indexNum.value = -1;

  saveJobInfo();
}

/**
 * 点击搜素选项
 * @param {Object} item 专业数据
 * @param {Number} index 下标
 */
function onClickSearchItem(item, index) {
  if (index == 0) {
    // 模糊搜索
    searchItem.name = item;
    saveJobInfo();
  } else {
    if (selJobs.value.length >= 5) {
      ElMessage({
        message: '意向职业不得超过5个！',
        type: 'warning',
      });
      return;
    }

    // 精准专业搜索
    let index = selJobs.value.findIndex((i) => i.code == item.code);
    if (index < 0) {
      selJobs.value.push(item);
      saveJobInfo();
    }
  }

  // 添加后清除搜索数据
  searchKey.value = '';
  searchList.value = [];
  isShowSearchPop.value = false;
}

// 保存专业筛选数据到仓库
function saveJobInfo() {
  let searchArray = [];
  selJobs.value.forEach((item) => {
    searchArray.push({
      name: item.name,
      code: item.code,
      type: 'job',
    });
  });

  // 判断是否存在模糊搜索
  if (searchItem.name.length > 0) {
    searchArray.push(searchItem);
  }

  userSearchVal.saveJobInfoChange(searchArray); // 保存到 store 中
}

/**
 * 删除某条筛选条件
 * @param {Object} item {type:'类型', code:'id', name:'标题'}
 */
function deleteScreenItem(item) {
  if (item.type == searchItem.type) {
    searchItem.name = '';
  } else {
    selJobs.value = selJobs.value.filter((i) => i.code != item.code);
  }
  saveJobInfo();
}

// 快速通道
const fastTrack = (num, tag) => {
  localStorage.setItem('zntbProvinceId', props.zntbProvinceId);
  localStorage.setItem('zntbScore', props.zntbScore);

  if (num == 1) {
    drawertoolRef.value.handleChangeDrawer(true, '3-1', null, tag);
  } else if (num == 2) {
  } else if (num == 3) {
    drawertoolRef.value.handleChangeDrawer(true, 2, null, 0);
  } else if (num == 4) {
    drawertoolRef.value.handleChangeDrawer(true, 5, null, 1);
  } else if (num == 5) {
    drawertoolRef.value.handleChangeDrawer(true, 5, null, 2);
  }
};

function deleteAll() {
  selJobs.value = [];
  tempSelJobs.value = [];
  searchItem.name = '';
  saveJobInfo();
}

defineExpose({
  deleteScreenItem,
  deleteAll,
});
</script>
<style lang="scss" scoped>
.flexend {
  div {
    font-size: 14px;
    font-weight: 400;
    color: #4e5969;
    line-height: 14px;
    margin-right: 20px;
    cursor: pointer;
  }
}
.major-left {
  width: 100px;
  font-size: 14px;
  text-align: center;
  color: #9b9b9b;
}
.major {
  display: flex;
  margin-top: 10px;

  .major-right {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    .major-size {
      font-size: 14px;
      margin-bottom: 12px;
      padding: 4px 16px;
      margin-right: 10px;
      text-align: center;
      border: 1px solid #e5e6eb;
      border-radius: 4px;
      cursor: pointer;
      color: #4e5969;
    }

    .active {
      border: 1px solid #004cf7;
      color: #004cf7;
    }
  }
}

.search-popover {
  position: absolute;
  top: 40px;
  left: 0;
  width: 240px;
  height: 200px;
  overflow: auto;
  background-color: white;
  z-index: 999;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  border-radius: 4px;
  border: 1px solid #c9cdd4;
  padding: 0 10px;
  font-size: 14px;
}
</style>
